<template>
    <div class="nav-box">
        <div class="nav-header">
            <div class="nav-user">
                <img src="@/assets/navLeft/nav_custom_service.jpg" alt="">
                <span>{{ userInfo.userName }}</span>
                <span class="nav-green-spot"
                    :style="{ 'background': workStatus == '1' ? '#96979F' : '#3FD229' }"></span>
            </div>
            <div class="nav-nowtime">{{ currentDayjs }}</div>
        </div>
        <div class="nav-btn">
            <el-button :class="activeTab === 'task' ? 'active' : ''" @click="changeTab('task')">任务处理</el-button>
            <el-button :class="activeTab === 'book' ? 'active' : ''" @click="changeTab('book')">通讯录</el-button>
        </div>
        <task v-show="activeTab === 'task'" />
        <address-book ref="addressBook" v-show="activeTab === 'book'" />
    </div>
</template>
<script>
import { mapState } from 'vuex'
import dayjs from 'dayjs'
import task from './components/task.vue'
import addressBook from './components/addressBook.vue'
// import { getWorkStatus } from '@/api/user';

export default {
    components: { task, addressBook },
    data() {
        return {
            activeTab: 'task',
            currentDayjs: dayjs().format('YYYY-MM-DD HH:mm:ss')
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo,
            workStatus: state => state.work.workStatus,
        })
    },
    methods: {
        changeTab(tab) {
            this.activeTab = tab;
            if (tab === 'book') {
                this.$nextTick(() => {
                    this.$refs.addressBook.searchUserList();
                })
            }
        }
    },
    mounted() {
        setInterval(() => {
            this.currentDayjs = dayjs().format('YYYY-MM-DD HH:mm:ss');
        }, 1000);
    }
}
</script>
<style lang='scss' scoped>
.nav-box {
    width: 370px;
    height: 100%;
    // overflow: hidden;
    padding: 20px 10px;
    border-right: 1px solid #E2E2E2;
}

.nav-header {
    display: flex;
    justify-content: space-between;
    font-size: 14px;

    .nav-user {
        display: flex;

        img {
            vertical-align: text-top;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .nav-green-spot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 5px 0 0 5px;
            background: #96979F;
            cursor: pointer;
        }
    }

    .nav-nowtime {
        color: #96979F;
    }
}

.nav-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    button {
        width: 47%;
    }

    button:hover {
        border: 1px solid #96979F;
        color: var(--theme-font-color);
    }

    .active {
        font-size: 14px;
        background: linear-gradient(to top right, #343540, #646677) !important;
        color: #fff !important;
    }

}
</style>
